<template>
    <div>
      <div class="me_header">
        <img @click="bac()" :src="'./static/lyl/back.png'" alt="">
        <span>资质展示</span>
        <img :src="'./static/lyl/san.png'" alt="">
      </div>
      <div class="z_tit">
        <img :src="avatar" alt="">
        <p>{{user_login}}</p>
      </div>
      <p class="pz">资质展示</p>
      <ul class="s_ul">
        <li v-for="(item,index) in showData" :key="index">
          <img :src="item.image" alt="">
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
</template>

<script>
  import * as search from "../../../api/search.js"
    export default {
      name: "ZiShow",
      data(){
        return {
          showData:[],
          avatar:'',
          user_login:''
        }
      },
      mounted(){
        let parms = {uid:this.$route.query.id};
        search.aptitude(parms).then(res=>{
          console.log('资质',res);
          this.showData = res.data
        });
        //获取用户昵称
        let par = {user_id:this.$route.query.id};
        search.userinfo(par).then(res=>{
          console.log('用户昵称',res);
          this.avatar = res.data.avatar;
          this.user_login = res.data.user_login
        });
      },
      methods:{
        bac(){
          history.go(-1)
        },
      }
    }
</script>

<style scoped>
  .me_header{
    border-bottom: 2px solid #dcdcdc;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
  }
  .me_header img:nth-child(1){
    width: 25px;
    height: 40px;
  }
  .me_header span{
    font-size: 32px;
  }
  .me_header img:nth-child(3){
    align-self: center;
    width: 60px;
  }
  .z_tit{
    border-bottom: 2px solid #dcdcdc;
    padding: 100px 0 50px;
    text-align: center;
  }
  .z_tit img{
    width: 210px;
    height: 210px;
    border-radius: 50%;
  }
  .z_tit p{
    font-size: 28px;
    padding-top: 20px;
  }
  .pz{
    padding: 20px;
    font-size: 20px;
    border-left: 8px solid #884ca4;
    border-bottom: 2px solid #dcdcdc;
  }
  .s_ul{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
  }
  .s_ul li{
    text-align: center;
    margin-right:18px;
  }
  .s_ul li:nth-child(2n+2){
    margin-right: 0;
  }
  .s_ul li img{
    width: 326px;
    height: 350px;
  }
  .s_ul li p{
    font-size: 24px;
    line-height: 54px;
  }
</style>
